<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" value="javaee2206"> <br>
        <input type="text" :value="val"> --- {{val}}<br>

<!--        v-model专门给表单项标签绑定value属性的，是一种双向绑定-->
        <input type="text" v-model="val"> --- {{val}}<br>

        <hr>

        <div>
            <input type="text" name="username" v-model="user.username"> <br>
            <input type="password" name="password" v-model="user.password"> <br>

            <p>效果： {{user.username}} -- {{user.password}}</p>
            <input type="submit" value="登录">
        </div>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        //定义数据模型
        data:{
            val:"javaee2206",
            user:{
                username:"",
                password:""
            }
        }
    });
</script>

</html>